<template>
  <div id="goodsinfo">
      <slot name="all-header"></slot>
      <div class="path-container">
        <el-breadcrumb separator-class="el-icon-arrow-right">
            <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
            <el-breadcrumb-item>歌單管理</el-breadcrumb-item>
            <el-breadcrumb-item>歌單信息</el-breadcrumb-item>
            </el-breadcrumb>
       </div>
      <el-container style="height:580px">
           <el-header style="text-align: left; font-size: 12px;padding-left:34px;width:100%">
               <el-button type="primary" 
                icon="el-icon-plus" @click="deleteSelect()">
                    批量刪除
                </el-button>
                <el-button type="primary" 
                icon="el-icon-plus" @click="addUser()">
                    增加
                </el-button>

                <el-input v-model="input" 
                 style="width:40%"
                placeholder="请输入内容">

                </el-input>
               <el-button type="primary" @click="searchUser()"
               icon="el-icon-search">搜索
               </el-button>
            </el-header>
            
            <el-main id="userlist">
               <el-table :data="tableData"  @selection-change="handleSelectionChange">
                   <el-table-column type="selection" >
                    </el-table-column>
                    <el-table-column prop="id" label="序號" width="60">
                    </el-table-column>
                    <el-table-column prop="title" label="歌單名" width="80" >
                    </el-table-column>
                   <el-table-column prop="pic" label="封面" width="160">
                         <template slot-scope="scope">
                        
                            <el-image
                            style="width: 100px; height: 100px"
                            :src="'http://localhost:8081'+scope.row.pic"
                            ></el-image>  
                            
                             
                        </template>
                    </el-table-column>

                     <el-table-column prop="introduction" label="簡介" width="120">
                    </el-table-column>

                      <el-table-column prop="songId" label="歌曲Id" width="120" >
                    </el-table-column>

                     <el-table-column prop="style" label="風格" width="120">
                    </el-table-column>

                    <el-table-column label="操作">  
                                <template slot-scope="scope">
                                <el-upload 
                                :action="uploadUrl(scope.row.id)"  
                                :on-success="handleAvatarSuccess"
                                :befor-upload="beforeAvatarUpload"
                                >
                                        <el-button size="mini">
                                            更新圖片
                                        </el-button>
                                
                                </el-upload>
                                 <el-button size="mini" @click="gotoListSongPage(scope.row.id)">
                                            歌單管理
                                </el-button>
                        </template>
                    </el-table-column>
                           <el-table-column label="操作">  
                                <template slot-scope="scope">
        
                                    <el-button
                                    size="mini"
                                    @click="updateUser(scope.$index,scope.row)">编辑</el-button>
                                    <el-button
                                    size="mini"
                                    type="danger"
                                    @click="deleteUser(scope.$index,scope.row)">删除</el-button>
                                </template>
                        </el-table-column>
               </el-table>
            </el-main>
     </el-container>

     <!--分頁...........-->
        <div class="block">
           
            <el-pagination
            @current-change="handleCurrentChange"
            :current-page.sync="currentPage"
            :page-size="3"
            layout="total,prev, pager, next, jumper"
            :total="pageCount">
            </el-pagination>
        </div>
  </div>
</template>

<script>
import {get} from '../util'
export default {
   data() {
       return {
         //用戶列表...
            tableData:[],

            //輸入框的內容
            input:'',

            //當前頁
            currentPage:1,

            //數據個數
            pageCount:0,    
       }
   },
   methods: {
       //---------------------------------------------------------------
       getUsers(){
           this.searchUser(1);
       },
       //---------------------------------------------------------------
       /**
        * @description 搜索用戶...
        *              搜索有兩種情況....
        *         @param  有參 ---input!=''
        *         @param      沒參 ---input==''
        *         @path   /search?userName=this.input & page=0 & pageSize=9
        * 
        * 更改用戶...
        *           
        * 刪除用戶..
        *           
        */
       //---------------------------------------------------------------
       async searchUser(page){
          /**
           * @無參查詢
           * @這里是分頁查詢
           */
           let that=this;
           if(this.input==''){
               if(page==undefined){
                await   get(this,"/querySongListLimit?page="+(that.currentPage-1)*3+"&pageSize=3")
                    .then(res=>{
                        console.log(res);
                        that.tableData=res.data.data;
                        this.getPageCountByNoParam();
                    })
               return;
               }
             await  get(this,"/querySongListLimit?page="+(page-1)*3+"&pageSize=3")
               .then(res=>{
                   console.log(res);
                   that.tableData=res.data.data;
                   this.getPageCountByNoParam();
               })
               return ;
           }
           //有參...
          await get(this,"/querySongListLimitHasInput?name="+
               this.input+"&page="+(that.currentPage-1)*3+"&pageSize=3")
           .then(res=>{
               //console.log(res)
               that.tableData=res.data;
               this.getPageCountByHasParam();
           })
       },


       /**
        * @description 增加...
        * @path        /addRoomType?type=....
        *           
        */
       //*-------------------------------------------------------------------
       async addUser() {
            let that=this;
            this.$router.push({path:'/homepage/updateGoodsTypeInfo',query:{do:'add'}});
            
        },

        //*-------------------------------------------------------------------
       /**
        * @description 更改
        * @path        /updateRoomType?type= & TypeId=
        */
       //*-------------------------------------------------------------------
       updateUser(index,row){
           let that=this;
           this.$router.push({path:'/homepage/updateGoodsTypeInfo',
           query:{do:'update',
           id:(row.id),
           title:row.title,
           introduction:row.introduction,
           songId:row.songId+'',
           style:row.style
           }});
       },

        //*-------------------------------------------------------------------
        /**
        * @description 刪除
        * @path        /deleteRoomTpye?userId=...
        */
        //*-------------------------------------------------------------------
        async deleteUser(index,row){
           let that=this;
           await this.$axios.get("http://localhost:8081/deleteSongList?id="+row.id)
            .then((result) => {
                if(result.data=='deleted'){
                    that.pageCount--;
                    if(that.pageCount%3==0)
                    {
                      console.log("in")
                      that.currentPage--;
                      that.searchUser(that.currentPage)

                      this.$message({
                        message: '刪除成功',
                        type: 'success',
                        duration:1000
                        });
                      return
                    }
                    that.searchUser(that.currentPage);
                    this.$message({
                        message: '刪除成功',
                        type: 'success',
                        duration:1000
                        });
                    console.log("ok")
                }    
            })
       },
         //*-------------------------------------------------------------------
        /**
        * @description 批量刪除
        * @path        /deleteRoomTpye?userId=...
        */
        //*-------------------------------------------------------------------
       deleteSelect(){
         for (const key in this.multipleSelection) {
             this.deleteUser(0,this.multipleSelection[key])
         }
       },
       //---------------------------------------------------------------
        /**
         * 增加或者刪除時的狀態...
         */
        mypathChange(){
            let that=this;
            if(that.$route.query.status=='inserted'){
                //console.log('in');
                that.$message({
                message: '增加成功',
                type: 'success',
                duration:1000
                });

            }
            else if(that.$route.query.status=='updated')
            {
                that.$message({
                message: '更改成功',
                type: 'success',
                duration:1000
                });
            }
      },
        //*-------------------------------------------------------------------
        /**
         * @description 頁數請求...
         * http://localhost:8081/queryLimit?page=1&pageSize=14
         */
        handleCurrentChange(val){
            let that =this;
            that.currentPage=val;
            that.searchUser(that.currentPage);
        },
         //*-------------------------------------------------------------------
        handleSelectionChange(val) {
           this.multipleSelection = val;
        },
         //*-------------------------------------------------------------------
        /**
         * @無參數版的個數查詢
         */
        getPageCountByNoParam(){
          get(this,'SongListPageCount')
          .then(res=>{
              this.pageCount=res.data
          })
        },

         //*-------------------------------------------------------------------
        /**
         * @有參數版的個數查詢
         */
        getPageCountByHasParam(){
           get(this,'SongListPageCountHasInput?name='+this.input)
           .then(res=>{
               this.pageCount=res.data;
           })
        },

        uploadUrl(id){
           return 'http://localhost:8081/uploadSongListPic?id='+id;
        },

        /**------------------------------------------------------------------------ */
        beforeAvatarUpload(file){
           let is=(file.type === 'image/jpeg') || (file.type === 'image/png')
           if(!is){
               this.$message.error('上傳頭像圖片只能是jpg或png格式');
               return false;
           }
           return true;

        },
        /**-------------------------------------------------------------------------- */
        /**
         * @description 上傳成功..
         */
        handleAvatarSuccess(res,file){
            this.imageUrl = URL.createObjectURL(file.raw);
            this.searchUser(this.currentPage);

        },

        /**------------------------------------------------------------------------- */
        /**
         * @description 歌單管理轉到相應的歌單頁面---1..*
         */
        gotoListSongPage(id){
            this.$router.push({path:'/homepage/listSong',query:{SongListId:id}});
            
            this.$emit('addTab',id);
        }
     },
      mounted() {
        this.getUsers();
        this.mypathChange();
        this.getPageCountByNoParam();
        
   },
   

}
</script>

<style>
     #goodsinfo{
       width: 70%;
     }

     #userlist{
         width: 120%;
     }
</style>